<template>
    <div ref="parent" @mouseenter="enter" @mouseleave="leave" @wheel="handleWheel" class="loop-scroll">
        <div ref="one" :style="{top: oneTop + 'px'}" class="loop">
            <slot></slot>
        </div>
        <div ref="two" :style="{top: twoTop + 'px'}" class="loop">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';

const props = withDefaults(defineProps<{
    speed?: number

}>(), {

    speed: 20
})
const isHover = ref(false)
const parent = ref<HTMLElement>()
const one = ref<HTMLElement>()
const two = ref<HTMLElement>()
const oneTop = ref(0)
const twoTop = ref(0)
const dir = ref(-1)
const speed = ref(0.2)
const loopHeight = ref(0)
let animationFrameId = 0
onMounted(() => {

    setTimeout(() => {
        start()
    }, 500)
})

const animate = () => {
    console.log('animate...')
    let offset = dir.value * speed.value
    if(isHover.value){
        offset = 0
    }

    oneTop.value += offset
    twoTop.value += offset

    if(dir.value == -1){
        if(oneTop.value < -loopHeight.value){
            oneTop.value += loopHeight.value * 2
        }
        if(twoTop.value < -loopHeight.value){
            twoTop.value += loopHeight.value * 2
        }
    } 
    if(dir.value == 1){
        if(oneTop.value > loopHeight.value){
            oneTop.value -= loopHeight.value * 2
        }
        if(twoTop.value > loopHeight.value){
            twoTop.value -= loopHeight.value * 2
        }
    }

    animationFrameId = requestAnimationFrame(animate)
}

const start = () => {
    cancelAnimationFrame(animationFrameId)

    loopHeight.value = one.value?.offsetHeight!
    oneTop.value = 0
    twoTop.value = one.value?.offsetHeight!

    let parentHeight = parent.value!.clientHeight
    if(parentHeight >= one.value?.offsetHeight!){
        twoTop.value = 100000
        return
    }
    
    animate()
}

const enter = () => {
    console.log('enter....')
    isHover.value = true
}

const leave = () => {
    console.log('leave....')
    isHover.value = false
}

const handleWheel = (e: any) => {
    console.log(e)
    console.log(e.deltaY)

    let parentHeight = parent.value!.clientHeight
    if(parentHeight >= one.value?.offsetHeight!){
       
        return
    }

    oneTop.value += -(e.deltaY / 5) * speed.value
    twoTop.value += -(e.deltaY / 5) * speed.value

    if(e.deltaY > 0){
        if(oneTop.value < -loopHeight.value){
            oneTop.value += loopHeight.value * 2
        }
        if(twoTop.value < -loopHeight.value){
            twoTop.value += loopHeight.value * 2
        }
    } 
    if(e.deltaY < 0){
        if(oneTop.value > loopHeight.value){
            oneTop.value -= loopHeight.value * 2
        }
        if(twoTop.value > loopHeight.value){
            twoTop.value -= loopHeight.value * 2
        }
    }
}

defineExpose({
    start,
})
</script>
<style scoped>
.loop-scroll {
    overflow-y: hidden;
    position: relative;
}

.loop {
    position: absolute;
    left: 0;
    width: 100%
}
</style>
